import React from 'react';
import PageTitle from 'component/pageTitle/index.jsx';
import MUtil from 'util/mm.jsx'
import Order from 'service/order-service.jsx'
import TableList from 'util/table-list/index.jsx'
import './detail.scss'
const _mm = new MUtil()
const _order = new Order()

class OrderDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            orderNumber:this.props.match.params.orderNumber,
            orderInfo: {}
        }
    }

    componentDidMount() {
        this.loadOrderDetail()
    }

    loadOrderDetail() {
        _order.getOrderDetail(this.state.orderNumber).then((res) => {
            this.setState({
                orderInfo: res
            });
        }, (errMsg) => {
            _mm.errorTips(errMsg);
        })
    }

    getSubImagesString() {
        return this.state.subImages.map((image) => image.uri).join(',')
    }

    onSendGoods() {
        if(window.confirm('是否确认该订单已经发货')) {
            _order.onSendGoods(this.state.orderNumber).then((res) => {
                _mm.successTips('发货成功');
                this.loadOrderDetail()
            }, (errMsg) => {
                _mm.errorTips(errMsg)
            })
        }
    }

    render() {
        let receiverInfo = this.state.orderInfo.shippingVo || {},
            productList = this.state.orderInfo.orderItemVoList || [];
        return (
            <div id="page-wrapper">
                <PageTitle title="订单详情"/>
                <div className="form-horizontal">
                    <div className="form-group">
                        <label className="col-md-2 control-label">订单号</label>
                        <div className="col-md-5">
                            <p className="form-control-static">
                                {this.state.orderInfo.orderNo}
                                {
                                    this.state.orderInfo.status === 20 
                                    ? <button className="btn btn-default btn-sm btn-send" onClick={(e) => {this.onSendGoods(e)}}>立即发货</button>
                                    : null
                                }
                            </p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">创建时间</label>
                        <div className="col-md-5">
                            <p className="form-control-static">{this.state.orderInfo.createTime}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">s收件人</label>
                        <div className="col-md-5">
                            <p className="form-control-static">
                            {receiverInfo.receiverName},
                            {receiverInfo.receiverProvince} 
                            {receiverInfo.receiverCity} 
                            {receiverInfo.receiverAddress} 
                            {receiverInfo.receiverMobile || receiverInfo.receiverPhone}
                            </p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">订单状态</label>
                        <div className="col-md-5">
                            <p className="form-control-static">
                                {this.state.orderInfo.statusDesc}
                            </p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">支付方式</label>
                        <div className="col-md-5">
                            <p className="form-control-static">
                                {this.state.orderInfo.paymentTypeDesc}
                            </p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">订单金额</label>
                        <div className="col-md-5">
                            <p className="form-control-static">
                                ￥{this.state.orderInfo.payment}
                            </p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品列表</label>
                        <div className="col-md-10">
                            <TableList tableHeads={['商品图片', '商品信息', '单价', '数量', '合计']}>
                                {
                                    productList.map((product, index) => {
                                        return (
                                            <tr key={index}>
                                                <td>
                                                    <img className="p-img" src={`${this.state.orderInfo.imageHost}${product.productImage}`} alt={product.productName}/>
                                                </td>
                                                <td>{product.productName}</td>
                                                <td>￥{product.currentUnitPrice}</td>
                                                <td>{product.quantity}</td>
                                                <td>{product.totalPrice}</td>
                                            </tr>
                                        )
                                    })
                                }
                            </TableList>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default OrderDetail

